<template>
  <!-- 
ref
props与emit
v-model   .sync
 -->
  <!-- <van-popup position="right" v-model="showEdit"> -->
  <van-popup position="right" :value="editShow">
    <van-nav-bar
      left-arrow
      title="编辑昵称"
      @click-right="rightClick"
      @click-left="$emit('update:editShow', false)"
    >
      <template #right>
        <div style="color:#f40;">
          提交
        </div>
      </template>
    </van-nav-bar>
    <!-- 表单验证
    1：van-form
    2:van-field rules=[
    {
        required:true,message:'必填',trigger:'onChange/onBlur'
    },
    {
        validator:(value)=>{
            return boolean
            true:验证通过
            false:验证失败
        }，
        message:'错误信息',
        trigger:"onChange"
    }
    
    ]
    3:全局验证
      1:el-form  ref='form'
      2:this.$refs.form.validate().then().catch()
    4:局部验证
    this.$refs.form.validate(name的值).then().catch()
     -->
    <van-form ref="form">
      <van-field v-model="inputValue" :rules="rules"></van-field>
    </van-form>
  </van-popup>
</template>
<script>
export default {
  name: 'Edit',
  props: ['editShow'],
  //   model: {
  //     prop: 'editShow',
  //     event: 'input'
  //   },
  data () {
    return {
      showEdit: false,
      inputValue: '',
      rules: [
        {
          required: true,
          message: '必填',
          trigger: 'onChange'
        },
        {
          validator: value => {
            // 不能和当前值（this.$store.state.userInfo.name）一样
            return value !== this.$store.state.user.userInfo.name
          },
          message: '不能和当前值一样',
          trigger: 'onChange'
        }
      ]
    }
  },
  methods: {
    rightClick () {
      console.log('执行没')
      this.$refs.form
        .validate()
        .then(() => {
          console.log('验证成功')
          //   this.$parent.editUserInfo({
          //     key: 'name',
          //     value: this.inputValue
          //   })
          this.$emit('editUserInfo', {
            key: 'name',
            value: this.inputValue
          })
          //   this.showEdit = false
          this.$emit('update:editShow', false)
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
// scoped ：加了有什么作用：看得见的就可以管，看不见的就管不到，组件相对于能看到组件最外层
// 组件内的class要修改就加::v-deep
.van-popup {
  height: 100%;
  width: 100%;
}
::v-deep .van-field__control {
  background-color: #ccc;
}
</style>
